<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="js/jquery.cruise.js"></script>
        <script type="text/javascript" src="js/json2.js"></script>
        <script type="text/javascript" src="js/beautify.js"></script>
        <script type="text/javascript" src="js/beautify-html.js"></script>
        <script type="text/javascript" src="js/plugins-old/cruise.layout.js"></script>
        <!-- script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
        <script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
        <script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushXml.js"></script>
        <link type="text/css" rel="stylesheet" href="syntaxhighlighter_3.0.83/styles/shCore.css"/>
        <link type="text/css" rel="stylesheet" href="syntaxhighlighter_3.0.83/styles/shThemeDefault.css"/ -->
        <script type="text/javascript" language="JAVASCRIPT">
            var uidl;
            $(document).ready(function(){
                
                $.getJSON("myui_min.json", function(data){
                    console.log(data);
                    uidl = data;
                    $('#smartCode').append(js_beautify(JSON.stringify(uidl)));
                });
                
                $('#render').click(function(){
                    $('#mainDiv').cruise(uidl);
                    $('#htmlCode').append(style_html($('#mainDiv').html()).replace(/</g, "&lt;").replace(/>/g,"&gt;"));
                });
                    
            });
        </script>
    </head>
    <body>
        <div id="smartEditor" style="float: left;height: 174px;overflow: auto;width: 50%;border: 1px solid gray;padding: 2px;"><div><pre id="smartCode" class="brush: js"></pre></div></div>
        <div id="htmlEditor" style="height: 174px;overflow: auto;width: 50%;border: 1px solid gray;padding: 2px;"><div><pre  id="htmlCode"></pre></div></div>
        <div style="clear: both;" />
        <div><input type="button" id="render" value="render" name="Render" /></div>
        <hr/>
        <div id="mainDiv"></div>
    </body>
</html>
